<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .box {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        padding-left: 200px; /* 初始 padding-left 值 */
        transition: padding-left 1s; /* 设置过渡属性为 padding-left，持续时间为 1 秒 */
        cursor: pointer; /* 鼠标样式为手型，表示可以点击 */
    }
</style>
<title>Padding-left 点击渐变动画示例</title>
</head>
<body>
    <div class="box" onclick="togglePadding()">Click to toggle padding</div>

    <script>
        function togglePadding() {
            var box = document.querySelector('.box');
            if (box.style.paddingLeft === '64px') {
                box.style.paddingLeft = '200px'; // 初始 padding-left 值
            } else {
                box.style.paddingLeft = '64px'; // 点击后的 padding-left 值
            }
        }
    </script>
</body>
</html>
